/**
 * 甜甜圈图组件
 * 用于展示数据的占比关系，中间有孔
 */

import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import { ChartData, ChartOptions } from '../types';

interface DoughnutChartProps {
  data: ChartData;
  options?: ChartOptions;
  height?: number;
}

const DoughnutChart: React.FC<DoughnutChartProps> = ({
  data,
  options,
  height = 400,
}) => {
  // 甜甜圈图只使用第一个数据集
  if (!data.datasets || data.datasets.length === 0) {
    return null;
  }

  const firstDataset = data.datasets[0];
  const dataLength = firstDataset.data.length;
  
  // 生成足够的颜色数组，使用淡色填充 + 深色边框（与官方示例一致）
  const generateColors = (count: number) => {
    // 淡色背景（alpha 值较小，颜色看起来更淡）
    const baseBackgroundColors = [
      'rgba(255, 99, 132, 0.2)',   // 淡红色 #ffe0e6 类似
      'rgba(54, 162, 235, 0.2)',    // 淡蓝色
      'rgba(255, 206, 86, 0.2)',    // 淡黄色
      'rgba(75, 192, 192, 0.2)',    // 淡青色 #dbf2f2 类似
      'rgba(153, 102, 255, 0.2)',   // 淡紫色
      'rgba(255, 159, 64, 0.2)',    // 淡橙色
      'rgba(199, 199, 199, 0.2)',   // 淡灰色
      'rgba(83, 102, 255, 0.2)',    // 淡深蓝色
      'rgba(255, 99, 255, 0.2)',    // 淡粉色
      'rgba(99, 255, 132, 0.2)',    // 淡绿色
      'rgba(255, 132, 99, 0.2)',    // 淡橙红色
      'rgba(132, 99, 255, 0.2)',    // 淡紫蓝色
    ];
    
    const colors = [];
    for (let i = 0; i < count; i++) {
      colors.push(baseBackgroundColors[i % baseBackgroundColors.length]);
    }
    return colors;
  };

  const generateBorderColors = (count: number) => {
    // 深色边框（完全不透明）
    const baseBorderColors = [
      'rgba(255, 99, 132, 1)',   // 深红色
      'rgba(54, 162, 235, 1)',    // 深蓝色
      'rgba(255, 206, 86, 1)',    // 深黄色
      'rgba(75, 192, 192, 1)',    // 深青色
      'rgba(153, 102, 255, 1)',   // 深紫色
      'rgba(255, 159, 64, 1)',    // 深橙色
      'rgba(199, 199, 199, 1)',   // 深灰色
      'rgba(83, 102, 255, 1)',    // 深深蓝色
      'rgba(255, 99, 255, 1)',    // 深粉色
      'rgba(99, 255, 132, 1)',    // 深绿色
      'rgba(255, 132, 99, 1)',    // 深橙红色
      'rgba(132, 99, 255, 1)',    // 深紫蓝色
    ];
    
    const colors = [];
    for (let i = 0; i < count; i++) {
      colors.push(baseBorderColors[i % baseBorderColors.length]);
    }
    return colors;
  };
  
  // 生成颜色
  const backgroundColor = Array.isArray(firstDataset.backgroundColor) && firstDataset.backgroundColor.length >= dataLength
    ? firstDataset.backgroundColor
    : generateColors(dataLength);
  
  const borderColor = Array.isArray(firstDataset.borderColor) && firstDataset.borderColor.length >= dataLength
    ? firstDataset.borderColor
    : generateBorderColors(dataLength);
  
  // 构建甜甜圈图数据
  const doughnutData = {
    labels: data.labels,
    datasets: [
      {
        label: firstDataset.label || '数据',
        data: firstDataset.data,
        backgroundColor: backgroundColor,
        borderColor: borderColor,
        borderWidth: 1, // 显示深色边框
        hoverBackgroundColor: backgroundColor, // 悬停时保持相同颜色
      },
    ],
  };

  // 甜甜圈图选项，参考官方示例样式
  const chartOptions: any = {
    responsive: true,
    maintainAspectRatio: true,
    layout: {
      padding: 0,
    },
    // 甜甜圈图不需要坐标轴
    elements: {
      arc: {
        borderWidth: 1, // 显示深色边框
      },
    },
    plugins: {
      legend: {
        display: true,
        position: 'right' as const,
        labels: {
          padding: 15,
          usePointStyle: true,
          boxWidth: 12,
          font: {
            size: 12,
          },
        },
      },
      tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        padding: 12,
        titleFont: {
          size: 14,
        },
        bodyFont: {
          size: 12,
        },
        callbacks: {
          label: function(context: any) {
            const label = context.label || '';
            const value = context.parsed || 0;
            const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0);
            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
            return `${label}: ${value.toLocaleString()} (${percentage}%)`;
          },
        },
      },
    },
  };

  return (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center', 
      width: '100%', 
      height: '100%' 
    }}>
      <Doughnut data={doughnutData as any} options={chartOptions} height={height} />
    </div>
  );
};

export default DoughnutChart;

